<template>
  <div>
      <van-row @click="openModal">
        <van-col span="6">
          <img :src="avatarSrc" >
        </van-col>
        <van-col span="15">{{nickname}}</van-col>
        <van-col span="3">
          <van-icon name="arrow"></van-icon>
        </van-col>
      </van-row>


      <van-grid :column-num="3" square>
        <van-grid-item icon="label-o" text="我的订单" />
        <van-grid-item icon="bill-o" text="优惠券" />
        <van-grid-item icon="gift-card-o" text="礼品卡" />
        <van-grid-item icon="goods-collect-o" text="我的收藏" />
        <van-grid-item icon="flag-o" text="我的足迹" />
        <van-grid-item icon="user-o" text="会员福利" />
        <van-grid-item icon="location-o" text="地址管理" />
        <van-grid-item icon="warning-o" text="账号安全" />
        <van-grid-item icon="service-o" text="联系客服" />
        <van-grid-item icon="question-o" text="帮助中心" />
        <van-grid-item icon="smile-comment-o" text="意见反馈" />
      </van-grid>

      <transition name="van-fade">
        <div class="login-modal" v-show="isShowModal">
            <div class="close-modal"  @click="isShowModal=!isShowModal"></div>
            <van-form @submit="onSubmit" class="login-form">
                <van-field
                  v-model="username"
                  name="用户名"
                  label="用户名"
                  placeholder="用户名"
                  :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                  v-model="password"
                  type="password"
                  name="密码"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                  <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
      </transition>  
  </div>
</template>

<script>

import {GoLogin} from '@/request/api'
export default {
  data () {
    return {
      avatarSrc: require("../assets/avatar.png"),
      username: '',
      password: '',
      isShowModal: false,
      nickname: "用户登录"
 
    }
  },
  created() {
    // 组件刚创建的时候需要判断用户是否登录,判断localStorage有没有token值
    // 如果有就应该天上用户信息
    let token =  localStorage.getItem("token")
    if (token) {
      // 表示已经有登录状态,就要渲染用户信息
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      this.nickname = userInfo.nickname;
      this.avatarSrc = userInfo.avatar;
    }
  },
  methods: {
     onSubmit(values) {
      // console.log('submit', values);

      let username = values["用户名"];
      let pwd = values["密码"];
      GoLogin({
        username,
        pwd
      }).then(res=> {
        // console.log(res.data);
        if(res.data.errno == 0){
          console.log(res.data);
          // 登录成功了
          // 1.提示框提示登录成功
          this.$toast.success('登录成功');
          // 2.把token保存到本地存储
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("userInfo", JSON.stringify(res.data.data.userInfo));
          // 3.1s后关闭模态框
          setTimeout(() => {
            this.isShowModal = !this.isShowModal;
            // 4.把拿到的userInfo填写到页面上
            this.nickname = res.data.data.userInfo.nickname;
            this.avatarSrc = res.data.data.userInfo.avatar;
          }, 1000);
          
        }
      })
    },
    openModal() {
      // 判断用户是否登录,如果登录就直接return
      // 没有登录就取反
      let token = localStorage.getItem("token")
      if(token) {
        return
      }
      this.isShowModal = !this.isShowModal
    }
  },
}
</script>
 
<style lang = "less" scoped>
.login-modal {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  .login-form {
    width: 90%;
    background-color: #fff;
    padding-bottom: .2rem;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -45%;
    box-sizing: border-box;
  }
  .close-modal{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  /* .van-form{
      width: 90%;
      position: absolute;
      top: 40vh;
      left: 50%;
      margin-left: -45%;
      padding: .1rem;
      box-sizing: border-box;
      background: #fff;
  } */
}
  .van-row {
  padding: 0.2rem 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 0.7rem;
    font-size: 0.18rem;
    img {
      width: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}


</style>